<template>
	<div class="routine-indicator absolute position-b center-horizontal flex-column align-center">
		<div class="black-bg color-white nowrap" style="padding:8px">
			<div class="title-3 flex align-center">
				<div class="round success-bg" style="width:7px;height:7px;margin-right:8px" />{{type?'结束时间':'开始时间'}}
			</div>
			<div class="content">{{format(gpsRecord.timestamp+8*60*60*1000,'yyyy-MM-dd HH:MM:ss')}}</div>
		</div>
		<div class="triangle" />
	</div>
</template>

<script>
import { format } from "date-fns";
export default {
	name: "RoutineIndicator",
	props: {
		gpsRecord: {
			type: Object,
			required: true
		},
		type: {
			type: Number,
			required: true
		}
	},
	methods: {
		format
	}
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.routine-indicator {
	.triangle {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		margin-top: 8px;
		border-top: 5px solid $--color-primary;
	}
}
</style>